<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【案例】下拉菜单</title>
    <style>

    </style>
</head>
<body>
   <ul class="nav">
       <li>
           <a href="#">微博</a>
           <ul>
               <li><a href="">私信</a></li>
               <li><a href="">评论</a></li>
               <li><a href="">@我</a></li>
           </ul>
       </li>
       <li>
           <a href="#">微博</a>
           <ul>
               <li><a href="">私信</a></li>
               <li><a href="">评论</a></li>
               <li><a href="">@我</a></li>
           </ul>
       </li>
       <li>
           <a href="#">微博</a>
           <ul>
               <li><a href="">私信</a></li>
               <li><a href="">评论</a></li>
               <li><a href="">@我</a></li>
           </ul>
       </li>
       <li>
           <a href="#">微博</a>
           <ul>
               <li><a href="">私信</a></li>
               <li><a href="">评论</a></li>
               <li><a href="">@我</a></li>
           </ul>
       </li>
   </ul>
</body>
<script>
    //1.获取元素
    var nav = document.querySelector('.nav');
    var lis = nav.children;
    //2.注册鼠标指针经过和鼠标指针离开事件
    for(var i = 0;i < lis.length; i++){
        lis[i].onmouseover = function (){
            this.children[1].style.display = 'block';//ul为li的第2个元素
        };
        lis[i].onmouseout = function (){
            this.children[1].style.display = 'none';
        }
    }
</script>
</html>